<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 元素属性编辑器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .editor-container {
            display: flex;
            gap: 20px;
        }
        .element-box {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
            width: 30%;
        }
        .attribute-editor {
            width: 65%;
        }
        .attribute-row {
            margin-bottom: 10px;
        }
        label {
            display: inline-block;
            width: 100px;
        }
        input[type="text"] {
            width: calc(100% - 110px);
            padding: 5px;
        }
        button {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="editor-container">
    <div class="element-box" id="editable-element">
        <h1 id="editable-heading">这是一个可编辑的标题</h1>
        <p id="editable-paragraph">这是一个可编辑的段落。</p>
    </div>
    <div class="attribute-editor">
        <div class="attribute-row">
            <label for="heading-text">标题文本:</label>
            <input type="text" id="heading-text" value="这是一个可编辑的标题">
        </div>
        <div class="attribute-row">
            <label for="paragraph-text">段落文本:</label>
            <input type="text" id="paragraph-text" value="这是一个可编辑的段落。">
        </div>
        <div class="attribute-row">
            <label for="heading-color">标题颜色:</label>
            <input type="color" id="heading-color" value="#000000">
        </div>
        <div class="attribute-row">
            <label for="paragraph-color">段落颜色:</label>
            <input type="color" id="paragraph-color" value="#000000">
        </div>
        <div class="attribute-row">
            <label for="background-color">背景颜色:</label>
            <input type="color" id="background-color" value="#ffffff">
        </div>
        <button onclick="applyChanges()">应用更改</button>
    </div>
</div>

<script>
    function applyChanges() {
        // 获取输入框的值
        const headingText = document.getElementById('heading-text').value;
        const paragraphText = document.getElementById('paragraph-text').value;
        const headingColor = document.getElementById('heading-color').value;
        const paragraphColor = document.getElementById('paragraph-color').value;
        const backgroundColor = document.getElementById('background-color').value;

        // 修改元素的内容和样式
        const editableHeading = document.getElementById('editable-heading');
        const editableParagraph = document.getElementById('editable-paragraph');
        const editableElement = document.getElementById('editable-element');

        editableHeading.textContent = headingText;
        editableParagraph.textContent = paragraphText;
        editableHeading.style.color = headingColor;
        editableParagraph.style.color = paragraphColor;
        editableElement.style.backgroundColor = backgroundColor;
    }
</script>
</body>
</html>